<template>
	<view class="box">
		<tabbar @handleBtnClick='refresh'></tabbar>
		<view class="list-item">
			<view class="">
				<view  class="list-img"><image  mode="aspectFill" lazy-load="true" :src="mot_img_url" /></view>
			</view>
			<view class="list-desc ">{{ mot_content }}</view>
		</view>
	</view>
</template>

<script>
	import tabbar from '@/component/tabbar/tabbar.vue'
export default {
	components:{
		tabbar
	},
	data() {
		return {

			mot_img_url: '../../../static/images/loading.gif', //随机图片
			mot_content: '' //随机短句
		};
	},
	methods:{
		getInfo(){
			
			uni.request({
				url: 'https://bing.ioliu.cn/v1/rand?type=json',
				success: res => {
					console.log('随机图片', res.data);
					this.mot_img_url = 'https://images.weserv.nl/?url='+ res.data.data.url;
				}
			});
			//获取短句
			uni.request({
				url: 'http://api.tianapi.com/txapi/wanan/index?key=1a162a6b0fec66a258dc8f80a8c9cfdb',
				success: res => {
					console.log('短句', res.data.newslist[0].content);
					this.mot_content = res.data.newslist[0].content;
				}
			});
			
		},
		refresh(name){
			
			if (name == 'collect') {
				this.mot_img_url='../../../static/images/loading.gif'
				
				this.getInfo()
			}
		}
		
	},

	onLoad() {
		this.getInfo()
	}
};
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	justify-content: space-between;
}
.list-item {
	flex: 50%;
	width: 320rpx;
	// margin-top: 40rpx;
}

.list-item .list-img {
	width: 100%;
	height: 644rpx;
	border-radius:0 0 10rpx 10rpx;
	overflow: hidden;
}

.list-item .list-title {
	margin-top: 20rpx;
	font-size: 34rpx;
	color: #e6e7f2;
}

.list-item .list-desc {
	// text-indent: 2em;
	margin-top: 45rpx;
	font-size: 34rpx;
	color: #98a1bd;
	// text-align: center;
	padding: 0 20rpx;
}
</style>
